<template>
  <div id="projectDetail">
    <div class="detail-box">
      <div class="detail-wrapper">
        <div class="flex">
          <div class="detail-pic">
            <md-swiper
              ref="swiper"
              :is-prevent="false"
              :useNative-driver="false"
            >
              <md-swiper-item
                :key="$index"
                v-for="(item, $index) in cardInfo.thumb"
              >
                <img :src="formatImg(item)" :onerror="errorImg" alt="" />
              </md-swiper-item>
            </md-swiper>
          </div>
          <div class="detail-content">
            <span class="title">{{ cardInfo.project_name }}</span>
            <span class="tag">
              <a-tag v-for="(item, index) in cardInfo.tags" :key="index">{{
                item
              }}</a-tag> </span
            ><br />
            <span class="progress">
              <a-progress
                :percent="parseFloat(cardInfo.percent)"
                strokeColor="#fd7400"
              />
            </span>
            <div class="money-wrapper">
              <div>
                <span class="money-content"
                  >已筹金额:
                  <span>{{ toMoney(cardInfo.has_order_money) }}</span></span
                ><span class="money-content">
                  剩余天数:
                  <span>{{
                    cardInfo.status > 2 ? "0天" : cardInfo.remaining_time
                  }}</span>
                </span>
              </div>
              <div>
                <span class="money-content">
                  目标金额: <span>{{ toMoney(cardInfo.target_code) }}</span>
                </span>

                <span class="money-content">
                  我已支持: <span>{{ toMoney(cardInfo.my_order_money) }}</span>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="project-detail">
          <div class="project-text">
            <div class="project-detail-info">
              <md-tabs>
                <md-tab-pane class="content" name="1" label="项目详情">
                  <div
                    class="project-content-wrapper"
                    v-html="htmlEncode(cardInfo.des)"
                  ></div>
                </md-tab-pane>
                <md-tab-pane class="content" name="2" label="项目动态">
                  <div class="project-content-wrapper-new">
                    <div
                      v-if="cardInfo.new_list.length === 0"
                      style="text-align: center;padding: 20pt;color: grey;font-size: 8pt"
                    >
                      暂无数据！
                    </div>
                    <project-new-card
                      v-for="(item, index) in cardInfo.new_list"
                      :key="index"
                      :cardInfo="item"
                    ></project-new-card>
                  </div>
                </md-tab-pane>
                <md-tab-pane class="content" name="3" label="合作详情">
                  <div
                    class="project-content-wrapper"
                    v-html="htmlEncode(cardInfo.detail)"
                  ></div>
                </md-tab-pane>
              </md-tabs>
            </div>
            <div class="common-wrapper project-team-info">
              <a-collapse :activeKey="activeKey" :bordered="false">
                <a-collapse-panel header="项目发起方" key="1">
                  <div class="project-team">
                    <img
                      :src="
                        $api.imgProjectUrl +
                          '/uploads/projectuser/logo/' +
                          cardInfo.logo
                      "
                      alt=""
                    />
                    <p>
                      {{ cardInfo.company_intro }}
                    </p>
                  </div>
                </a-collapse-panel>
                <a-collapse-panel header="风险说明" key="2" :disabled="false">
                  <p>
                    1、众筹不是商品交易，您根据自己的判断选择是否支持众筹项目，与发起人共同实现梦想并获得收益，众筹存在一定的风险；
                    2、本平台作为您与项目方之间的桥梁，仅提供网络空间、技术服务和支持等中介服务，作为平台方筛选优质项目，合法合规展示项目信息，披露项目进展，对项目盈利及亏损不承担法律责任；
                    3、众筹项目收益分配后续服务事项均由项目方负责，如遇项目方无故拖延收益分配等情形的，平台可对此进行协调沟通，帮助您实时了解相关情况，但不对此承担法律责任。
                    4、由于市场风险，法律风险等各种因素，众筹可能失败，众筹期限内未达到目标筹资额失败的项目，您支持的款项会全部原路退还给您。
                  </p>
                </a-collapse-panel>
              </a-collapse>
            </div>
          </div>
        </div>
      </div>
      <footer>
        <a-button
          v-if="cardInfo.status === 2"
          class="button"
          size="large"
          type="primary"
          @click="showModal()"
          block
        >
          立即支持</a-button
        >
        <a-button
          v-else-if="cardInfo.status >= 3"
          disabled
          class="button"
          size="large"
          type="primary"
          block
          >众筹成功</a-button
        >
        <a-button
          v-else-if="cardInfo.status === 1"
          disabled
          class="button"
          size="large"
          type="primary"
          block
          >预热中</a-button
        >
      </footer>
    </div>
    <md-popup v-model="visible" position="bottom">
      <md-popup-title-bar
        title="支持详情"
        cancel-text="X"
        @cancel="visible = false"
      ></md-popup-title-bar>
      <div class="md-example-popup" :class="isShowKeybord ? 'add-buttom' : ''">
        <div class="hry-title">
          您正在支持项目：{{ orderInfo.project_name }}
        </div>
        <md-field style="width: 120pt; margin: 0 auto;">
          <md-input-item
            ref="name"
            type="money"
            v-model="money"
            title="支持金额(元)"
            placeholder="请输入支持金额"
            is-title-latent
            is-virtual-keyboard
            clearable
            align="center"
            @focus="onFakeInputFocus"
            @blur="onFakeInputBlur"
          ></md-input-item>
          <md-number-keyboard
            type="simple"
            ref="myNumberKeyBoard"
          ></md-number-keyboard>
          <span class="text-danger">*支持金额必须为100的倍数</span>
        </md-field>
        <div class="balance-wrapper">
          <div>
            <span class="label">您的余额：</span>{{ orderInfo.money }}元
          </div>
          <div>
            <a-button type="primary" @click="$commonJs.goPage('personRecharge')"
              >充值</a-button
            >
          </div>
        </div>
        <a-checkbox :checked="isChecked" @change="onChange">
          <span style="font-size: 7pt"
            >我已同意<a
              href="javaScript:(0)"
              @click="agreement('tzfx', '投资风险承诺书')"
              >《投资风险承诺书》</a
            ></span
          ></a-checkbox
        >
        <a-button
          @click.native="payChange"
          type="primary"
          block
          size="large"
          style="height: 30pt !important; font-size: 11pt"
          >立即支持</a-button
        >
      </div>
    </md-popup>
    <a-modal
      width="80%"
      height="80%"
      :title="title"
      :visible="isShow"
      @cancel="handleCancel"
    >
      <agreement :type="type"></agreement>
      <template slot="footer">
        <a-button key="submit" type="primary" @click="handleCancel">
          关闭
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import {
  Swiper,
  SwiperItem,
  Popup,
  PopupTitleBar,
  InputItem,
  Field,
  NumberKeyboard,
  Tabs,
  TabPane,
  Toast
} from "mand-mobile";
import { toMoney } from "@/tool/lib";
import simple from "mand-mobile/components/swiper/demo/data/simple";
import { Progress, Modal } from "ant-design-vue";
export default {
  name: "index",
  components: {
    [Swiper.name]: Swiper,
    [SwiperItem.name]: SwiperItem,
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [NumberKeyboard.name]: NumberKeyboard,
    [InputItem.name]: InputItem,
    [Field.name]: Field,
    aProgress: Progress,
    [Tabs.name]: Tabs,
    [TabPane.name]: TabPane,
    projectNewCard: () => import("@/components/newCard/mobileIndex"),
    agreement: () => import("@/components/commonAgreement/index")
  },
  props: {
    cardInfo: {
      type: Object
    }
  },
  data() {
    return {
      simple,
      isChecked: true,
      isShowKeybord: false,
      visible: false,
      activeKey: [],
      top: 10,
      newInfo: [],
      info: {},
      money: null,
      isShow: false,
      type: "",
      title: "",
      orderInfo: {},
      errorImg: 'this.src="' + require("@/assets/img/tulie.png") + '"'
    };
  },
  methods: {
    formatImg(thumb) {
      if (thumb.indexOf("http") !== -1) {
        return thumb;
      } else {
        return this.$api.imgProjectUrl + thumb;
      }
    },
    htmlEncode(text) {
      if (text) {
        var arrEntities = { lt: "<", gt: ">", nbsp: " ", amp: "&", quot: '"' };
        return text.replace(/&(lt|gt|nbsp|amp|quot);/gi, function(all, t) {
          return arrEntities[t];
        });
      } else {
        return "";
      }
    },
    showModal() {
      let that = this;
      if (this.isLogin) {
        if (this.memberType === "进取型") {
          this.$ajax
            .post(this.$api.oderProject, { project_id: this.$route.params.id })
            .then(res => {
              this.orderInfo = res.data;
              this.visible = true;
            })
            .catch(err => {
              this.$message.error(err);
            });
        } else {
          Modal.confirm({
            title: "尊敬的用户：",
            content: "您的投资类型评估不符合条件，请前往个人中心重新评估！",
            okText: "前往评估",
            cancelText: "取消",
            onOk() {
              that.$router.push({ name: "questionnaire" });
            }
          });
        }
      } else {
        this.$message.warning("您尚未登录，请登录");
      }
    },
    agreement(type, title) {
      this.title = title;
      this.type = type;
      this.isShow = true;
    },
    onFakeInputFocus() {
      this.isShowKeybord = true;
    },
    onFakeInputBlur() {
      this.isShowKeybord = false;
    },
    toMoney(num) {
      return toMoney(num);
    },
    handleCancel() {
      this.isShow = false;
    },
    onChange(e) {
      this.isChecked = e.target.checked;
    },
    payChange() {
      let validate = true;
      // if (this.money % 100 !== 0) {
      //   validate = false;
      //   Toast.failed("支持金额必须为100的倍数");
      //   return false;
      // }
      let reg = /^[1-9]\d*$/;
      if (!reg.test(this.money)) {
        validate = false;
        Toast.failed("首位数字不能为零");
        return false;
      }
      if (!this.isChecked) {
        validate = false;
        Toast.failed("尚未同意相关协议");
        return false;
      }
      if (validate) {
        this.$ajax
          .post(
            this.$api.createOrder,
            {
              project_id: this.$route.params.id,
              money: this.money
            },
            false,
            "创建订单中"
          )
          .then(res => {
            this.$commonJs.goPage("projectPay", res.data.order_id);
          })
          .catch(err => {
            this.$message.error(err);
          });
      }
    }
  },
  computed: {
    isLogin() {
      return this.$store.state.isLogin;
    },
    memberType() {
      return this.$store.state.memberType;
    }
  }
};
</script>

<style scoped lang="less">
.md-example-popup {
  background: @white;
  width: 100%;
  padding: 62px 72px 36px 72px;
  .hry-title {
    padding-bottom: 27px;
    font-size: 25px;
    font-weight: bold;
    border-bottom: 1px solid #e7e7ea;
  }
  .text-danger {
    font-size: 18px;
  }
  .balance-wrapper {
    padding-top: 27px;
    border-top: 1px solid #e7e7ea;
    margin-top: 27px;
    .flex_content();
    .flex_justify_space();
    > div {
      color: @primary-color;
      &:first-child {
        font-size: 25px;
        line-height: 40px;
        .label {
          color: #444444;
          display: inline-block;
          margin-right: 39px;
        }
      }
    }
  }
}
.add-buttom {
  padding-bottom: 150px;
}
#projectDetail {
  background: #f5f5f4;
  height: 100%;
  .detail-box {
    height: 100%;
    .flex_content();
    .flex_column();
    footer {
      height: 95px;
      width: 100%;
      background: @white;
      .ant-btn-lg {
        height: 95px;
        font-size: 30px;
      }
    }
    .detail-wrapper {
      .flex_one();
      overflow: auto;
      .flex {
        background: @white;
        .detail-pic {
          width: 100%;
          font-size: 0;
          img {
            width: 100%;
          }
        }
        .detail-content {
          padding: 20px;
          .title {
            color: #444444;
            font-size: 30px;
          }
          .tag {
            display: inline-block;
            margin-top: 14px;
            .ant-tag {
              font-size: 20px;
              padding: 0 18px;
              margin-right: 18px;
              height: 23px;
              line-height: 23px;
              color: #fa8c16;
              background: @white;
              border-color: #ffd591;
            }
          }
          .money-wrapper {
            margin-top: 75px;
            .flex_content();
            > div {
              .flex_one();
              &:first-child {
                border-right: 1px solid #444444;
                margin-right: 75px;
              }
            }
            .money-content {
              &:first-child {
                margin-bottom: 26px;
              }
              display: block;
              font-size: 20px;
              color: #444444;
              span {
                color: @primary-color;
              }
            }
          }
          .progress {
            display: block;
          }
        }
      }
      .project-detail {
        margin-top: 25px;
        width: 100%;
        .project-text {
          width: 100%;
          .project-detail-info {
            width: 100%;
            margin-bottom: 25px;
            background: @white;
            .project-content-wrapper-new {
              padding: 0;
              width: 100%;
              overflow: hidden;
            }
            .project-content-wrapper {
              padding: 20px;
              text-align: center;
              width: 100%;
              overflow: hidden;
            }
          }
          .project-team-info {
            background: @white;
            .project-team {
              img {
                margin-right: 1.25rem;
                float: left;
                width: 117px;
              }
            }
            p {
              font-size: 0.81rem;
              line-height: 1.25rem;
            }
          }
        }
      }
    }
  }
}
</style>
